<!--
程序名：数据分析页面
-->
<template>
	<div class="Count">

		<div v-if="!(detail.length == 0)" class="opera-buttons">

			<div style="font-size: 400%; color: #409EFF;">{{peopleNum}}</div>
			<div style="color: #909399;">已填写人数</div>

		</div>

		<br />
		<div v-if="detail.length == 0">暂时没有数据</div>
		<el-card class="question" v-for="(item, index) in detail">
			<div slot="header" class="clearfix">
				<span>{{ index + 1 + "." + item.title }}</span>
			</div>
			<!--如果数据库中的问题类型为单项选择或者多项选择-->
			<!--则将数据库中的数据以表格、、饼状图、的方式进行展示-->
			<div v-if="item.type == 'radio' || item.type == 'checkbox'">
				<el-table size="small" :data="item.options" style="width: 100%" stripe class="table">
					<el-table-column prop="title" label="选项"></el-table-column>
					<el-table-column prop="count" label="数量" width="180"></el-table-column>
					<el-table-column prop="percent" label="占比" width="180"></el-table-column>
				</el-table>
				<br />

				<el-button size="mini" type="primary" plain @click.native="changeValue(index, 1)">饼状图</el-button>

				<el-button size="mini" type="primary" plain @click.native="changeValue(index, 2)">柱状图</el-button>

				<!--点击后对应index变为0，所有图标不显示-->
				<el-button size="mini" type="primary" plain @click.native="changeValue(index, 0)">隐藏图表</el-button>

				<!--饼状图显示区域，点击饼状图后状态为1才显示-->
				<div :id="'bing' + index" class="bing" v-show="visible[index] == 1"></div>

				<!--柱状图显示区域，点击饼状图后状态为2才显示-->
				<div :id="'graph' + index" class="graph" v-show="visible[index] == 2"></div>

			</div>
			<!--如果数据库中的问题类型为text类型则将数据以弹窗表格的形式进行显示-->
			<div v-if="item.type == 'text'">
				<el-button size="mini" type="primary" plain @click.native="lookTextDetail(item.id)">详细内容</el-button>

			</div>
		</el-card>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<el-dialog title="详细内容" :visible.sync="dialogTableVisible">
			<div style="color: #409EFF;">共{{textLength}}条数据</div>
			<el-table :data="tableData" height="250" border style="width: 100%">
				<el-table-column type="index" width="50">
				</el-table-column>
				<el-table-column prop="content" label="答案"></el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>
<script>
	import * as echarts from 'echarts';
	import axios from "axios";
	export default {
		data() {
			return {
				dialogTableVisible: false,
				visible: [],
				detail: [],
				tableData: [],
				textLength: 0,
				form_id: 0,
				peopleNum: 0,
			};
		},
		mounted() {
			this.form_id = this.$route.params.id;
			this.getCountPeople(this.form_id);
			this.getCountResult(this.form_id);
		},
		methods: {

			//统计答案，将统计好的问题答案数组发送到前端
			getCountResult(form_id) {

				const _this = this;
				axios
					.get('http://localhost:8082/fillForm/countResult/' + form_id)
					.then(function(resp) {
						_this.detail = resp.data;
					})
					.catch(function(error) {
						console.log(error);
					});

			},

			//统计填写该问卷的人数
			getCountPeople(form_id) {
				const _this = this;
				axios
					.get('http://localhost:8082/fillForm/countPeople/' + form_id)
					.then(function(resp) {
						_this.peopleNum = resp.data;
					})
					.catch(function(error) {
						console.log(error);
					});

			},

			//查看文本回答详情
			lookTextDetail(questionId) {
				this.tableData = [];
				this.textLength = 0;
				this.dialogTableVisible = true;

				const _this = this;
				axios
					.get('http://localhost:8082/fillForm/queryAnswer/' + questionId)
					.then(function(resp) {
						_this.textLength = resp.data.length;
						for (let i = 0; i < resp.data.length; i++) {
							let item = {};
							item.content = resp.data[i];
							_this.tableData.push(item);
						}
					})
					.catch(function(error) {
						console.log(error);
					});

			},

			//切换图表
			//changeValue(index, 1)
			//设置对应下标index的行，要展示的图标类型
			//判断点击了哪个图标按钮
			changeValue(index, value) {
				//向visible中添加数据
				this.$set(this.visible, index, value);

				if (value == 1) {
					this.setPar(index);
				} else if (value == 2) {
					this.setGraph(index);
				}
			},



			// 饼状图
			//根据下标index设置对应行的饼状图
			setPar(index) {
				let myChart = echarts.init(document.getElementById("bing" + index));
				var option = {
					tooltip: {},
					color: ["#409EFF", "#FFB54D", "#FF7466", "#44DB5E"],
					legend: {
						data: ["数量"]
					},
					dataset: {
						dimensions: ["title", "count", "percent"],
						source: this.detail[index].options
					},
					series: [{
						name: "统计结果：",
						type: "pie",
						radius: "55%",
						center: ["50%", "50%"],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: "rgba(0, 0, 0, 0.5)"
							}
						}
					}]
				};
				myChart.setOption(option);
			},

			//柱状图
			//根据下标index设置对应行的柱状图
			setGraph(index) {

				let myChart = echarts.init(document.getElementById("graph" + index));
				var option = {
					tooltip: {},
					legend: {
						data: ["数量"]
					},
					dataset: {
						dimensions: ["title", "count", "percent"],
						source: this.detail[index].options
					},
					xAxis: {
						type: "category"
					},
					yAxis: {},
					series: [{
						name: "数量：",
						type: "bar",
						barWidth: 30,
						color: "deepskyblue"
					}]
				};
				myChart.setOption(option);
			},

		}
	};
</script>
<style scoped>
	.Count {
		text-align: center;
	}

	.Count .question {
		max-width: 800px;
		width: 80%;
		display: inline-block;
		margin: 5px;
		text-align: left;
	}

	.Count .table {}

	.Count .graph {
		width: 500px;
		height: 300px;
	}

	.Count .bing {
		width: 500px;
		height: 300px;
	}


	.opera-buttons {
		padding: 10px;
	}
</style>
